<li class="flex align-center gap-half" data-filter-target="item" data-navigable-list-target="item">
  <%= link_to user, class: "txt-ink flex gap-half align-center min-width" do %>
    <%= avatar_preview_tag user, hidden_for_screen_reader: true %>
    <div class="txt-align-start overflow-ellipsis">
      <strong><%= user.name %></strong>
      <div class="txt-x-small"><%= user.identity.email_address %></div>
    </div>
  <% end %>

  <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">

  <%= form_with model: user, url: user_role_path(user), data: { controller: "form" }, method: :patch do | form | %>
    <span title="<%= role_display_name(user) %>">
      <label class="btn btn--circle" for="<%= dom_id(user, :role) %>" aria-label="Role: <%= role_display_name(user) %>">
        <%= icon_tag "crown" %>
        <span class="for-screen-reader">Role: <%= role_display_name(user) %></span>
        <%= form.check_box :role, { data: { action: "form#submit" }, disabled: !Current.user.can_administer?(user), checked: user.admin?, hidden: true, id: dom_id(user, :role) }, "admin", "member" %>
      </label>
    </span>
  <% end %>

  <%# FIXME: Move this Current.user check to a stimulus controller that just checks for admin? or the like we so we can cache user list %>
  <%= button_to user, method: :delete, class: "btn btn--circle btn--negative",
        disabled: !Current.user.can_administer?(user),
        data: { turbo_confirm: "Are you sure you want to permanently remove this person from the account?" } do %>
    <%= icon_tag "minus" %>
    <span class="for-screen-reader">Remove <%= user.name %> from the account</span>
  <% end %>
</li>
